<template>
	<view class="page">
		<!-- <view class="flex benben-position-layout flex flex-wrap align-center wrongQuestion_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub wrongQuestion_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  wrongQuestion_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<text class='wrongQuestion_fd0_0_c1'>订单详情</text>
				<view class='wrongQuestion_fd0_0_c2'>
				</view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view> -->
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#FC5B03"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="order_status" >
				<view class="order_status_text" v-if="detailsInfo.status == 1">待支付</view>
				<view class="order_status_text" v-if="detailsInfo.status == 2 || detailsInfo.status == 3">进行中</view>
				<view class="order_status_text" v-if="detailsInfo.status == 4">已完成</view>
				<view class="order_status_text" v-if="detailsInfo.status == 5">已取消</view>
				<view class="order_paytime flex align-center" v-if="detailsInfo.status == 1">
					<text class="paytime_1">剩余支付时间</text>
					<u-count-down class="paytime_2" color="#FC5B03" separator-color="#FC5B03" :show-days="false" :show-hours="false" separator="zh" :timestamp="detailsInfo.sysj" bg-color="transparent" @end="timeEnd"></u-count-down>
				</view>
			</view>
			
			<view class="car_info" :class="detailsInfo.status == 1 ? 'marginTop1' : 'marginTop2'">
				<view class="vehicle_information">
					<view class="car_content">
						<view class="car_name">
							<view class="car_name_1">{{detailsInfo.name}}</view>
							<view class="car_name_2">
								<text>{{detailsInfo.seats}}座</text>
								<text class="car_name_2_1">丨</text>
								<text>{{detailsInfo.gearbox}}</text>
								<text class="car_name_2_1">丨</text>
								<!-- <text>{{detailsInfo.category_name}}</text>
								<text class="car_name_2_1">丨</text> -->
								<text>{{detailsInfo.model}}</text>
							</view>
						</view>
						<view class="car_img">
							<u-lazy-load height="120" border-radius="16" class="car_img" :image="detailsInfo.image"></u-lazy-load>
							<image v-if="detailsInfo.type == 2" class="car_icon" :src='STATIC_URL+"220.png"' mode="aspectFill"></image>
						</view>
					</view>
					<view class="license_plate">
						<view class="label_le">
							<template v-if="detailsInfo.tags">
								<template v-for="(v, k) in (detailsInfo.tags).split(',')">
									<image v-if="v == 1" class="label_1" :src='STATIC_URL+"219.png"' mode="aspectFill"></image>
									<view class="label_2" v-if="v != 1">{{getTag(v)}}</view>
								</template>
							</template>
						</view>
						<view class="plate_le">
							<image class="plate_le_1" :src='STATIC_URL+"269.png"'></image>
							<view class="plate_le_2">丨</view>
							<view class="plate_le_3">{{detailsInfo.car_number}}</view>
						</view>
					</view>
				</view>
				<view class="car_date">
					<view class="date_content">
						<view class="date_item">
							<view class="date_item_1">{{timeData.toDay_month}}</view>
							<view class="date_item_2">
								<text v-if="timeData.is_today == 1">今天</text>
								<text v-else>{{timeData.week}}</text>
								<text>{{timeData.toDay_time}}</text>
							</view>
						</view>
						<view class="date_days">
							<view class="days_line"></view>
							<view class="days_num">共{{timeData.dayNum}}天</view>
							<view class="days_line"></view>
						</view>
						<view class="date_item">
							<view class="date_item_1">{{timeData.twoDay_month}}</view>
							<view class="date_item_2">
								<text>{{timeData.twoWeek}}</text>
								<text>{{timeData.twoDay_time}}</text>
							</view>
						</view>
					</view>
					<view class="quotation_information">
						<view class="information">
							<view class="information_2">
								<image :src='STATIC_URL+"225.png"'></image>
								<view class="information_2_1">取还车</view>
								<view class="information_2_2">
									<view class="information_2_2_1" v-if="detailsInfo.door_to_door == 1">到店取送车</view>
									<view class="information_2_2_1" v-else>店员上门取送车</view>
								</view>
							</view>
						</view>
						<view class="quotation_address">
							<!-- <image :src='STATIC_URL+"224.png"' mode="aspectFill"></image> -->
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="preferential">
				<view class="tip_title flex align-center justify-between">
					<view>续租信息</view>
					<!-- <view class="tip_title_ri flex align-center">
						<template v-if="detailsInfo.is_auth != 1">
							<image class="tip_title_ri_1" :src='STATIC_URL+"270.png"' mode="aspectFill"></image>
							<text class="tip_title_ri_2">未认证</text>
						</template>
						
						<template v-if="detailsInfo.is_auth == 1">
							<image class="tip_title_ri_1" :src='STATIC_URL+"271.png"' mode="aspectFill"></image>
							<text class="tip_title_ri_2">已认证</text>
						</template>
						<image class="tip_title_ri_3" :src='STATIC_URL+"208.png"' mode="aspectFill"></image>
					</view> -->
				</view>
				<view class="coupon">
					<view class="coupon_le">
						续租截止时间
					</view>
					<view class="coupon_ri">
						{{timeData.twoDay}}
					</view>
				</view>
				<view class="coupon" style="margin-top: 24rpx;">
					<view class="coupon_le">
						续租天数
					</view>
					<view class="coupon_ri">
						{{timeData.dayNum}}天
					</view>
				</view>
			</view>
			<!-- <view class="deposit">
				<view class="tip_title">押金支付方式</view>
				<view class="deposit_text">
					<image :src='STATIC_URL+"235.png"'></image>
					<image :src='STATIC_URL+"272.png"'></image>
					<view class="explain">
						<view class="explain_text">
							<view class="explain_text_1">到店免押金</view>
							<view class="explain_text_2">在线支付租金取车时到店扫码免押或者通过其他方式</view>
							<view class="explain_text_1">到店支付</view>
							<view class="explain_text_2">租车押金已线下收款，收车验车后将进行退还</view>
						</view>
					</view>
				</view>
			</view> -->
			
			<view class="order_detail">
				<view class="tip_title">续租明细</view>
				<view class="order_item">
					<view class="order_item_le">订单租金</view>
					<view class="order_item_ri">
						<span>￥{{Number(detailsInfo.price) * Number(timeData.dayNum)}}</span>
					</view>
				</view>
				<view class="order_item">
					<view class="order_item_le">基本保障服务费{{Number(detailsInfo.insure_money_oneday)}}*{{timeData.dayNum}}</view>
					<view class="order_item_ri">
						<span>￥{{Number(detailsInfo.insure_money_oneday * Number(timeData.dayNum))}}</span>
					</view>
				</view>
				<view class="order_item" v-if="detailsInfo.insure_plus_id != 0">
					<view class="order_item_le">{{upgrade_name}}</view>
					<view class="order_item_ri">
						<span>￥{{Number(detailsInfo.insure_plus_money_oneday)*timeData.dayNum}}</span>
					</view>
				</view>
			</view>
			
			<view class="money_footer">
				<view class="footer_le">
					<view class="footer_le_1">
						<text>￥</text>
						<text class="footer_le_1_1">{{totalPrice}}</text>
					</view>
					
				</view>
				<view class="footer_ri">
					<view class="footer_ri_2" @click="postGenerateOrder">去支付</view>
				</view>
			</view>
		</template>
		<view style="height: 150rpx;"></view>

		
		<u-popup v-model="buyShow" mode="bottom" border-radius="32">
			<view class="popup_price">
				<view class="popup_title">
					<view class=""></view>
					<u-icon @click="buyShow=false" name="close" color="#999"></u-icon>
				</view>
				<view class="popup_money">
					<text class="money_1">￥</text>
					<text class="money_2">325</text>
				</view>
				<view class="pay_list">
					<view class="pay_item" v-for="(item, index) in payType" :key="index" @tap.stop="selectPay(item.id)">
						<view class="pay_item_le">
							<image :src='item.icon'></image>
							<text>{{item.name}}</text>
						</view>
						<image v-if="pay_id == item.id" class="pay_item_ri" :src='STATIC_URL+"7.png"' ></image>
						<image v-else class="pay_item_ri" :src='STATIC_URL+"8.png"'></image>
					</view>
				</view>
				<view class="pay_btn flex align-center justify-center">立即支付</view>
			</view>
		</u-popup>
		
		<u-popup v-model="noticeShow" mode="bottom" border-radius="32">
			<view class="notice_info">
				<view class="title_text">预定须知</view>
				<view class="notice_title">
					<uv-tabs :scrollable="false" :list="list2" @click="click2" :current="swiperIndex" :itemStyle="itemStyle"
						:activeStyle="activeStyle" lineColor="#FC5B03"></uv-tabs>
				</view>
				<view class="notice_text">
					<swiper class="notice_swiper" :indicator-dots="false" :autoplay="false" :current="swiperIndex" :circular="false" @change="swiperIndex = $event.detail.current">
						<swiper-item>
							<view class="swiper-item">取消订单将扣除订单总金额30%的违约金</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">违章押金：2000元 在线授权成功后免收</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">下单时上传本人有效身份证，完成实名认证；取车时上传并带上本人驾驶证原件（正副本）或电子驾照。</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">租期内没有里程数限制</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="detailShow" mode="bottom" border-radius="32">
			<view class="notice_info">
				<view class="title_text">订单明细</view>
				<view class="order_detail">
					<view class="order_item">
						<view class="order_item_le">订单租金</view>
						<view class="order_item_ri">
							<span>￥{{detailsInfo.rent_money}}</span>
						</view>
					</view>
					<view class="order_item">
						<view class="order_item_le">基本保障服务费{{detailsInfo.insure_plus_money_oneday}}*{{timeData.dayNum}}</view>
						<view class="order_item_ri">
							<span>￥{{Number(detailsInfo.insure_plus_money_oneday)*timeData.dayNum}}</span>
						</view>
					</view>
					<view class="order_item">
						<view class="order_item_le">{{upgrade_name}}</view>
						<view class="order_item_ri">
							<span>￥{{detailsInfo.insure_plus_money}}</span>
						</view>
					</view>
					<view class="order_item" v-if="detailsInfo.door_to_door == 2">
						<view class="order_item_le">送车上门</view>
						<view class="order_item_ri">
							<span>￥{{detailsInfo.call_out_charge}}</span>
						</view>
					</view>
					
					<view class="order_item" v-if="detailsInfo.xryhq_price">
						<view class="order_item_le">新人优惠</view>
						<view class="order_item_ri">
							<span>￥{{detailsInfo.xryhq_price}}</span>
						</view>
					</view>
					<view class="order_item">
						<view class="order_item_le">券抵扣</view>
						<view class="order_item_ri">
							<span>￥{{detailsInfo.deduction}}</span>
						</view>
					</view>
					<view class="order_item" v-if="detailsInfo.time_out_hours">
						<view class="order_item_le">超时{{detailsInfo.time_out_hours}}小时</view>
						<view class="order_item_ri">
							<span>￥{{detailsInfo.time_out_price}}</span>
						</view>
					</view>
					<view class="order_item" v-if="detailsInfo.km_out_num">
						<view class="order_item_le">行驶里程{{detailsInfo.km_out_num}}km</view>
						<view class="order_item_ri">
							<span>￥{{detailsInfo.km_out_price}}</span>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal v-model="cancelShow" content="确认取消该订单吗？" :show-cancel-button="true" confirm-color="#FC5B03" @confirm="confirmCancel"></u-modal>
	</view>
</template>

<script>
	import utils from "@/common/utils/utils.js"
	export default {
		data() {
			return {
				"loadingImg": "",
				"errorImg": "",
				"imageUrl": "https://n.sinaimg.cn/spider20240423/618/w1267h951/20240423/00f3-b0424ba924fbe8bb330e2dabf0f7b880.jpg",
				scrollTop: 0, // 页面滚动距离
				buyShow: false,
				payType: [
					{
						name: '微信支付',
						icon: 'https://speed.zhongchuxing.com/dyimages/264.png',
						id: 1
					},
					{
						name: '支付宝支付',
						icon: 'https://speed.zhongchuxing.com/dyimages/265.png',
						id: 2
					},
					{
						name: '抖音支付',
						icon: 'https://speed.zhongchuxing.com/dyimages/263.png',
						id: 3
					}
				],
				pay_id: 1,
				order_id: "",  // 订单id
				isShow: true,
				detailsInfo: {},
				noticeShow: false,
				detailShow: false,
				list2: [{
						name: '取消规则',
						id: ''
					},
					{
						name: '押金政策',
						id: ''
					}, {
						name: '取车证件',
						id: ''
					},
					{
						name: '里程限制',
						id: ''
					},
				],
				swiperIndex: 0,
				itemStyle: {
					'height': '78rpx',
					'fontSize': '26rpx',
					'color': '#666666'
				},
				activeStyle: {
					'color': '#111111',
					'fontWeight': 'bold'
				},
				upgrade_name: "",  // 升级保障服务名称
				is_submit: false,
				provider: "",
				cancelShow: false,
				timeData: {},
				days: 0,  // 选择的续租天数
				totalPrice: 0,
				storeInfo: {},
				cityInfo: {},
				tags: uni.getStorageSync('tag'),
				openid: "",
			}
		},
		components: {

		},
		onReady() {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			let { order_id, days, timeData } = options;
			if (order_id !== undefined) this.order_id = order_id;
			if (days !== undefined) this.days = days;
			if (timeData !== undefined) this.timeData = JSON.parse(timeData);
			this.getDetails();
			
			let _this = this;
			uni.getProvider({
				service: 'payment',
				success: res => {
					// console.log(res);
					_this.provider = res.provider[0];
				},
				fail: err => {
					console.log(err);
				}
			})
			this.storeInfo = uni.getStorageSync('store');
			this.cityInfo = uni.getStorageSync('city');
			this.initCode();
			// this.timeData = global.timeData;
			// console.log(this.timeData);
		},
		methods: {
			// 订单详情
			getDetails() {
				this.$api.post(global.apiUrls.postOrderDetails, {
					order_id: this.order_id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.detailsInfo = res.data.data;
						this.totalPrice = (Number(this.detailsInfo.price) * this.timeData.dayNum) + Number(this.detailsInfo.insure_money_oneday) * this.timeData.dayNum + Number(this.detailsInfo.insure_plus_money_oneday) * this.timeData.dayNum;
						
						// let date = new Date(this.detailsInfo.repay_at);
						// let timeStamp = date.getTime();
						// let toDay = utils.getNowTime(timeStamp);
						// let week = utils.getWeekday(toDay);
						// let twoDay = utils.getTwoDaysAfter(timeStamp, Number(this.days));
						// let twoWeek = utils.getWeekday(twoDay);
						// this.timeData = {
						// 	dayNum: this.days,
						// 	is_today: this.detailsInfo.repay_at == utils.getNowTime() ? 1 : 0,
						// 	toDay: toDay,
						// 	toDay_month: (toDay.substring(5, 10)).replace('-', '月') + '日',
						// 	toDay_time: toDay.substring(11, 16),
						// 	week: week,
						// 	twoDay: twoDay,
						// 	twoDay_month: (twoDay.substring(5, 10)).replace('-', '月') + '日',
						// 	twoDay_time: twoDay.substring(11, 16),
						// 	twoWeek: twoWeek
						// }
						this.getCarInsure();
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			getTag(id) {
				let item = this.tags.find((item) => item.id == id);
				return item.name;
			},
			// 车辆保障数据列表  postCarInsure
			getCarInsure() {
				this.$api.post(global.apiUrls.postCarInsure, {
			
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.insureList = res.data.data;
						if (res.data.data.length > 0) {
							res.data.data.forEach((v, k) => {
								if (v.id == this.detailsInfo.insure_plus_id) {
									this.upgrade_name = v.name;
								}
							})
						}
			
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 生成订单   generateOrder
			postGenerateOrder() {
				if (this.is_submit) return;
				this.is_submit = true;
				uni.showLoading({
					title: '支付中'
				})
				this.$api.post(global.apiUrls.generateOrder, {
					order_id: this.order_id,
					real_car_id: this.detailsInfo.real_car_id,
					store_id: this.detailsInfo.store_id,
					take_at: this.timeData.toDay,
					repay_at: this.timeData.twoDay,
					door_to_door: this.detailsInfo.door_to_door,  //:1=自提,2=上门送车
					f_order_id: 1,  // 父级订单id
					is_free_deposit: 1,  // 是否免押金不能为空:1=不免押,2=免押
					type: 0,  // 订单类型:0=普通订单,1=优惠劵
					free_deposit_type: 1,  // 免押类型:1=到店免押,2=其他
					lng: this.door_to_door == 1 ? this.storeInfo.lon : this.cityInfo.lon,
					lat: this.door_to_door == 1 ? this.storeInfo.lat : this.cityInfo.lat,
					address: this.door_to_door == 1 ? this.storeInfo.store_name : this.cityInfo.city
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						// #ifdef MP-TOUTIAO
						this.getPreOrder(res.data.data.order_id);
						// #endif
						
						// this.getPreOrder(3);
						// #ifdef MP-WEIXIN
						this.creatWeixinpayment(res.data.data.order_id);
						// #endif
						
						
						// #ifdef MP-ALIPAY
						this.creatAlipaynpayment(res.data.data.order_id);
						// #endif
					} else {
						this.$message.info(res.data.info);
						this.is_submit = false;
						uni.hideLoading();
					}
				}).catch(err => {
					this.is_submit = false;
					uni.hideLoading();
				})
			},
			// 获取微信openid
			initCode() {
				let _this = this;
				let type = 2;
				// #ifdef MP-ALIPAY
				type = 3;
				// #endif
				uni.login({
					success: res => {
						// console.log(res);
						_this.$api.post(global.apiUrls.postgetOpenid, {
							code: res.code,
							type: type
						}).then(res => {
							if (res.data.code == 1) {
								_this.openid = res.data.data.openid;
							} else {
								_this.$message.info(res.data.info);
							}
						})
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			// 生成微信预支付数据  postweixinPay
			creatWeixinpayment(order_id) {
				this.$api.post(global.apiUrls.postweixinPay, {
					order_id: order_id,
					pay_type: 3,
					openid: this.openid,
					is_hello: 0,  // 0中出行  1哈啰
				}).then(result => {
					// console.log(result);
					uni.hideLoading();
					if (result.data.code == 1) {
						let _this = this;
						uni.requestPayment({
							provider: 'wxpay',
							// #ifdef MP-WEIXIN
							timeStamp: result.data.data.timeStamp,
							nonceStr: result.data.data.nonceStr,
							package: result.data.data.package,
							signType: result.data.data.signType,
							paySign: result.data.data.paySign,
							// #endif
							// #ifdef APP-PLUS
							orderInfo: data,
							// #endif
							success: (e) => {
								console.log('success', e)
								_this.$message.info('支付成功');
								setTimeout(() => {
									_this.is_submit = false;
									uni.redirectTo({
										url: '/pages/index/reserveOrder/reserveSuccess'
									})
								}, 800)
							},
							fail: (e) => {
								console.log(e);
								// #ifdef APP-PLUS
								let failMsg = 'requestPayment:fail canceled';
								// #endif
								// #ifndef APP-PLUS
								let failMsg = 'requestPayment:fail cancel';
								// #endif
								if (e.errMsg == failMsg) {
									_this.$message.info('支付已取消');
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/my/myOrder/orderDetails?order_id=' +
												order_id
										})
									}, 800)
								} else {
									_this.$message.info('支付失败,请稍后重试');
								}
								_this.is_submit = false;
							},
							complete: () => {}
						});
					} else {
						this.is_submit = false;
						this.$message.info(result.data.info);
					}
				})
			},
			// 生成支付宝预支付数据
			creatAlipaynpayment(order_id) {
				this.$api.post(global.apiUrls.postAlipayPay, {
					order_id: order_id,
					openid: this.openid
				}).then(result => {
					// console.log(result);
					uni.hideLoading();
					// return;
					if (result.data.code == 1) {
						let _this = this;
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: result.data.data.trade_no,
							success: (e) => {
								console.log('success', e)
								if (e.resultCode == 9000) {
									_this.$message.info('支付成功');
									setTimeout(() => {
										_this.is_submit = false;
										uni.redirectTo({
											url: '/pages/index/reserveOrder/reserveSuccess'
										})
									}, 800)
								} else if (e.resultCode == 6001 || e.resultCode == 6002) {
									_this.$message.info('支付已取消');
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/my/myOrder/orderDetails?order_id=' +
												order_id
										})
									}, 800)
								} else {
									_this.$message.info('支付失败，请重试');
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/my/myOrder/orderDetails?order_id=' +
												order_id
										})
									}, 800)
								}
								
							},
							fail: (e) => {
								console.log(e);
								// #ifdef APP-PLUS
								let failMsg = 'requestPayment:fail canceled';
								// #endif
								// #ifndef APP-PLUS
								let failMsg = 'requestPayment:fail cancel';
								// #endif
								if (e.errMsg == failMsg) {
									_this.$message.info('支付已取消');
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/my/myOrder/orderDetails?order_id=' +
												order_id
										})
									}, 800)
								} else {
									_this.$message.info('支付失败,请稍后重试');
								}
								_this.is_submit = false;
							},
							complete: () => {}
						});
					} else {
						this.is_submit = false;
						this.$message.info(result.data.info);
					}
				})
			},
			// 生成抖音预订单  postPreOrder
			getPreOrder(order_id) {
				this.$api.post(global.apiUrls.postPreOrder, {
					order_id: order_id
				}).then(res => {
					console.log(res);
					let orderInfo = res.data.data;
					if (res.data.code == 1) {
						uni.hideLoading();
						let _this = this;
						uni.requestPayment({
						    provider: _this.provider, 
						    orderInfo: orderInfo,
							service: 5,
							getOrderStatus(status) {
								console.log(status);
							},
						    success(res) {
								if (res.code == 0) {
									_this.$message.info('支付成功');
									setTimeout(() => {
										uni.navigateBack();
									}, 800)
								} else if (res.code == 4 || res.code == 3) {
									_this.$message.info('支付已取消');
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/my/myOrder/orderDetails?order_id=' + _this.order_id
										})
									}, 800)
								} else {
									_this.is_submit = false;
									_this.$message.info('支付失败,请稍后重试');
								}
								
								console.log(res);
							},
						    fail(e) {
								console.log(e);
								_this.is_submit = false;
								_this.$message.info('支付失败,请稍后重试');
							}
						})
					} else {
						this.$message.info(res.data.info);
						uni.hideLoading();
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
			// 待支付倒计时结束
			timeEnd() {
				this.isShow = true;
				this.getDetails();
			},
			// 拨打电话
			getPhone(phone) {
				if (!phone) {
					this.$message.info('未获取到门店联系方式，请联系客服');
					return;
				}
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			
			// 取消订单  cancelOrder
			openCancel() {
				this.cancelShow = true;
			},
			confirmCancel() {
				this.$api.post(global.apiUrls.cancelOrder, {
					order_id: this.order_id
				}).then(res => {
					this.$message.info(res.data.info);
					if (res.data.code == 1) {
						this.isShow = true;
						this.getDetails();
					}
				})
			},
			// 再次预定
			chooseCar() {
				uni.redirectTo({
					url: '/pages/index/modelsList/modelsList'
				})
			},
			click2(item) {
				this.swiperIndex = item.index;
			},
			openNotice(index) {
				this.swiperIndex = index;
				this.noticeShow = true;
			},
			selectPay(id) {
				this.pay_id = id;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice_info {
		.title_text {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			padding-top: 32rpx;
		}
		.notice_title {
			padding: 24rpx 0;
		}
	
		.notice_text {
			height: 300rpx;
			.notice_swiper {
				width: 100%;
				height: 100%;
				.swiper-item {
					width: 100%;
					height: 100%;
					padding: 0 32rpx 24rpx;
					font-size: 28rpx;
				}
			}
		}
	}
	.order_status {
		padding: 40rpx 24rpx;
		width: 100%;
		height: 260rpx;
		background: url(https://speed.zhongchuxing.com/dyimages/226.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		.order_status_text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 44rpx;
			color: #222222;
		}
		.order_paytime {
			margin-top: 14rpx;
			.paytime_1 {
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
			}
			.paytime_2 {
				font-weight: 500;
				font-size: 30rpx;
				color: #EF2E28;
				margin-left: 12rpx;
			}
		}
	}
	.popup_price {
		background: #F6F7FB !important;
		padding-bottom: 32rpx;
		.popup_money {
			display: flex;
			align-items: center;
			justify-content: center;
			.money_1 {
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
			}
			.money_2 {
				font-weight: bold;
				font-size: 64rpx;
				color: #000000;
			}
		}
		.pay_list {
			background: #fff;
			padding: 8rpx 24rpx;
			border-radius: 16rpx;
			margin: 32rpx 32rpx 42rpx;
			.pay_item {
				padding: 24rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.pay_item_le {
					display: flex;
					align-items: center;
					image {
						width: 52rpx;
						height: 52rpx;
						margin-right: 20rpx;
					}
					text {
						font-weight: 500;
						font-size: 30rpx;
						color: #111111;
					}
				}
				.pay_item_ri {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.pay_btn {
			width: 692rpx;
			height: 96rpx;
			background: #FC5B03;
			border-radius: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}

	.popup_title {
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
		padding: 32rpx 32rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.popup_calendar {
		padding: 0 8rpx 12rpx;
	}

	.u_tabs {
		height: 78rpx;
		position: sticky;
		top: 0;
		z-index: 10;
		display: flex;
		background-color: #fff;

		.tab_item {
			flex: 1;
			background-color: #fff;

			// line-height: 100px;
			&.active {
				background-color: rgb(55, 185, 169);
			}
		}
	}
	.marginTop1 {
		margin-top: -80rpx;
	}
	.marginTop2 {
		margin-top: -120rpx;
	}
	.car_info {
		background: #fff;
		border-radius: 16rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		padding: 20rpx;
		position: relative;
		z-index: 99;
	}
	.vehicle_information {
		position: relative;

		.car_content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.car_name {
				.car_name_1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.car_name_2 {
					margin-top: 16px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #111;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

					.car_name_2_1 {
						color: #CCCCCC;
					}
				}
			}

			.car_img {
				width: 160rpx;
				height: 120rpx;
				position: relative;

				.car_icon {
					width: 80rpx;
					height: 18rpx;
					position: absolute;
					top: 8rpx;
					right: 8rpx;
				}
			}
			/deep/.u-lazy-item {
				width: 160rpx !important;
				height: 120rpx !important;
			}
		}

		.license_plate {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			padding: 16rpx 0;
			border-radius: 16rpx;
			// position: absolute;
			// width: 100%;
			// bottom: 0;

			.plate_le {
				display: flex;
				align-items: center;
				width: 174rpx;
				height: 30rpx;

				.plate_le_1 {
					width: 28rpx;
					height: 28rpx;
				}

				.plate_le_2 {
					font-weight: 500;
					font-size: 22rpx;
					color: #506898;
				}

				.plate_le_3 {
					font-weight: 500;
					font-size: 22rpx;
					color: #506898;
				}
			}

			.label_le {
				flex: 1;
				display: flex;
				align-items: center;
			
				.label_1 {
					width: 108rpx;
					height: 30rpx;
				}
			
				.label_2 {
					padding: 2rpx 6rpx;
					background: rgba(26, 102, 250, 0.05);
					border-radius: 4rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: #506898;
					margin-left: 12rpx;
				}
			}
		}
	}

	.car_date {
		padding: 24rpx 0 0;
		border-top: 2rpx solid #F7F7F7;

		.date_content {
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 20rpx 54rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.date_item {
				.date_item_1 {
					font-size: 34rpx;
					font-weight: bold;
					color: #111111;
				}

				.date_item_2 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					color: #999;
				}
			}

			.date_days {
				display: flex;
				align-items: center;

				.days_line {
					width: 24rpx;
					height: 2rpx;
					background: #CCCCCC;
					border-radius: 2rpx;
				}

				.days_num {
					padding: 6rpx 34rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					border: 2rpx solid #CCCCCC;
					font-size: 26rpx;
					color: #111111;
				}
			}
		}

		.quotation_information {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.information {
				.information_2 {
					display: flex;
					margin-top: 16rpx;

					image {
						width: 18rpx;
						height: 12rpx;
						transform: translateY(12rpx);
					}

					.information_2_1 {
						font-weight: bold;
						font-size: 26rpx;
						color: #111111;
						margin: 0 12rpx 0 8rpx;
					}

					.information_2_2 {
						width: 434rpx;

						.information_2_2_1 {
							font-weight: bold;
							font-size: 26rpx;
							color: #FC5B03;
						}

						.information_2_2_2 {
							font-weight: 500;
							font-size: 26rpx;
							color: #111111;
							margin-top: 12rpx;
						}
					}
				}
			}

			.quotation_address {
				text-align: center;
				padding-top: 16rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-bottom: 8rpx;
				}

				.address_text {
					font-weight: 400;
					font-size: 20rpx;
					color: #1A66FA;
				}
			}

		}
	}


	.preferential {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 20rpx 24rpx 0;

		.coupon {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.coupon_le {
			font-weight: 400;
			font-size: 26rpx;
			color: #111111;
		}

		.coupon_ri {
			font-size: 26rpx;
			font-weight: bold;
			color: #111111;
		}
	}

	.order_detail {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx 1rpx;
		margin: 24rpx 24rpx 0;

		.order_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.order_item_le {
				font-size: 26rpx;
				color: #111111;
				font-weight: 400;
			}

			.order_item_ri {
				font-weight: bold;
				font-size: 26rpx;
				color: #111111;

				.order_item_ri_1 {
					font-weight: 500;
					font-size: 26rpx;
					color: #FC5B03;
					margin-right: 16rpx;
				}
			}
		}

		.order_line {
			width: 100%;
			height: 2rpx;
			background: #E7E7E7;
		}

		.order_price {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 20rpx;

			.order_price_1 {
				font-weight: 400;
				font-size: 26rpx;
				color: #111111;
			}

			.order_price_2 {
				font-weight: bold;
				font-size: 30rpx;
				color: #EF2E28;
			}
		}
	}

	.deposit {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 24rpx 24rpx 0;

		.deposit_text {
			display: flex;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.explain {
				padding-left: 12rpx;
				display: flex;
				align-items: center;

				.explain_text {
					.explain_text_1 {
						font-weight: bold;
						font-size: 26rpx;
						color: #111111;
					}

					.explain_text_2 {
						margin-top: 12rpx;
						font-size: 22rpx;
						color: #666666;
						line-height: 26rpx;
					}
				}
			}
		}
	}
	.order_change {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 24rpx 24rpx 0;
		.change_item {
			width: 152rpx;
			height: 60rpx;
			border-radius: 8rpx;
			border: 2rpx solid #E7E7E7;
			font-weight: 400;
			font-size: 26rpx;
			color: #111111;
		}
	}
	.record_info {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 24rpx 24rpx 0;
		.record_item {
			padding: 12rpx 24rpx;
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			font-weight: 500;
			font-size: 26rpx;
			color: #111111;
		}
		.record_line {
			width: 2rpx;
			height: 32rpx;
			background: #E7E7E7;
		}
	}
	.store_info {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 24rpx 24rpx 0;
		.store_content {
			.store_le {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
				.store_le_text {
					font-weight: bold;
					font-size: 26rpx;
					color: #111111;
				}
			}
			.store_ri {
				display: flex;
				align-items: center;
				.ri_item {
					display: flex;
					align-items: center;
					flex-direction: column;
					font-weight: 400;
					font-size: 20rpx;
					color: #CCCCCC;
					image {
						width: 32rpx;
						height: 32rpx;
						margin-bottom: 6rpx;
					}	
				}
				.ri_line {
					width: 2rpx;
					height: 32rpx;
					background: #E7E7E7;
					margin: 0 28rpx;
				}
			}
		}
	}
	.notice {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin: 24rpx 24rpx 0;

		.notice_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;

			.notice_item_le {
				font-weight: 400;
				font-size: 26rpx;
				color: #111111;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.money_footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: calc(0rpx + var(--window-bottom));
		left: 0;
		background: #fff;
		z-index: 10;
		padding: 0 24rpx 0 48rpx;

		.footer_le {
			.footer_le_1 {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #EF2E28;

				.footer_le_1_1 {
					font-weight: bold;
					font-size: 48rpx;
					color: #EF2E28;
				}
			}

			.footer_le_2 {
				font-weight: 500;
				font-size: 26rpx;
				color: #FC5B03;
			}
		}

		.footer_ri {
			display: flex;
			align-items: center;

			.footer_ri_1 {
				font-weight: 400;
				font-size: 26rpx;
				color: #1A66FA;
			}

			.footer_ri_2 {
				margin-left: 24rpx;
				width: 240rpx;
				height: 84rpx;
				background: #FC5B03;
				border-radius: 80rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
			}
		}
	}

	.tip_title {
		font-weight: bold;
		font-size: 30rpx;
		color: #111111;
		margin-bottom: 32rpx;
		.tip_title_ri {
			
			.tip_title_ri_1 {
				width: 40rpx;
				height: 39rpx;
			}
			.tip_title_ri_2 {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				margin-left: 4rpx;
			}
			.tip_title_ri_3 {
				width: 32rpx;
				height: 32rpx;
				margin-left: 8rpx;
			}
		}
	}

	.wrongQuestion_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.wrongQuestion_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
		line-height: 36rpx;
		width: 135rpx;
	}

	.wrongQuestion_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111;
		line-height: 50rpx;
	}

	.wrongQuestion_fd0_0_c2 {
		width: 135rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		text-align: right;
	}

	.wrongQuestion_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 2000;
		top: 0rpx;
		background: #fff;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background-size: 100% auto !important;
		background-color: #F6F7FB;
	}
</style>